<template>
  <div>
    <FormDialog
      :title="title"
      :isShow.sync="isShow"
      :width="width"
      :height="height"
      v-on:resetForm="close()"
    >
      <div class="addAndEditGoodsType">
        <el-form ref="form" :rules="rules" :model="form" label-width="100px">
          <el-form-item label="类型名称：" prop="label">
            <el-input v-model="form.label" placeholder="例如：手机"/>
          </el-form-item>
          <el-form-item label="类型值：" prop="value">
            <el-input v-model="form.value" placeholder="例如：phone"/>
          </el-form-item>
          <el-form-item label="上级节点：">
            <TreeSelect
              size="small"
              :data="tableData"
              :defaultProps="defaultProps"
              :checkedKeys="checkedKeys"
              v-model="selectClassify"
              nodeKey="value"
            />
          </el-form-item>
          <el-form-item>
            <el-button size='mini' type="primary" @click="onSubmit()">提交</el-button>
            <el-button size='mini' @click="close">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </FormDialog>
  </div>
</template>

<script>
import FormDialog from "@/components/index/formDialog";
import TreeSelect from "@/components/index/TreeSelect";
import { getAllType,addGoodsType,updateGoodsType } from "@/js/api/manage";
export default {
  name:'addAndEditGoodsType',
  components: {
    FormDialog,
    TreeSelect,
  },
  data(){
    return {
      title: "新增类型",
      width: "500px",
      height: "1000px",
      isShow: false,
      form:{},
      defaultProps: {
        children: "children",
        label: "label",
      },
      checkedKeys: [],
      selectClassify: {},
      rules: {
        label: [{ required: true, message: "请填写地区名称", trigger: "blur" }],
        value: [{ required: true, message: "请填写地区名称", trigger: "blur" }],
        pid: [{ required: true, message: "请填写地区名称", trigger: "blur" }],
      },
      tableData:[],
      actionState:false,
    }
  },
  methods:{
    show(data,pData){
      this.$nextTick(()=>{
        this.form = {
          label:"",
          value:'',
          pid:"",
        }
        if(data){
          this.form = data
          this.checkedKeys = [{value:pData.label}]
          this.selectClassify = {pid:pData.id}
          this.actionState = true
        }else{
          this.checkedKeys = [{value:'root'}]
          this.selectClassify = {pid:0}
        }
        this.isShow = true
        this.loadList()
      })
    },
    loadList(){
      getAllType().then(response=>{
        if(response.data.state){
          this.tableData = response.data.data.list
        }
      })
    },
    onSubmit() {
      if(this.selectClassify.pid>=0){
        if(this.selectClassify.id){
          this.form.pid = this.selectClassify.id
        }else{
          this.form.pid = this.selectClassify.pid
        }
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(!this.actionState){
            addGoodsType(this.form).then(response=>{
              if(response.data.state){
                this.utils.tips.success(response.data.msg)
                this.close()
              }else{
                this.utils.tips.error(response.data.msg)
              }
            })
          }else{
            updateGoodsType(this.form).then(response=>{
              if(response.data.state){
                this.utils.tips.success(response.data.msg)
                this.close()
              }else{
                this.utils.tips.error(response.data.msg)
              }
            })
          }
        }
      });
    },
    resetForm() {
      this.selectClassify = {}
      this.checkedKeys = []
      this.$refs["form"].resetFields();
    },
    close(){
      this.isShow = false
      this.actionState = false
      this.$emit("refresh")
      this.resetForm()
    },
  }
}
</script>

<style lang="less">

</style>